<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子面单</title>
    <style>
        @page {
            margin: 0;
        }


        @media print {


            img {
                width: 100%;
                display: block;
            }

            @page {
                size: 100mm 180mm;
                margin: 0;
            }
        }
    </style>
</head>
<body id="md">

</body>
<script>
    // 创建渲染进程对象
    const { ipcRenderer } = require('electron')
    //监听渲染线程传过来的webview-print-render事件
    ipcRenderer.on('webview-print-render', (event, deviceInfo) => {
      console.log('要开始打印了...')
      // 动态创建一个img标签，然后插入到<body>中。deviceInfo是渲染线程传过来的数据
      document.getElementById('md').innerHTML = `<img id="img01" src="${deviceInfo.print_template}">`;

      //当图片插入到页面后，通过ipcRenderer对象的sendToHost方法和渲染线程通讯，告诉渲染线程打印的内容已经准备完毕，请开始打印操作
      document.getElementById('img01').onload = function () {
        ipcRenderer.send('webview-print-do');
      }

    });
</script>
</html>
